/*
 * @Author: Leo.wang wanglizhigs@163.com
 * @Date: 2023-11-14 17:15:35
 * @LastEditors: Leo.wang wanglizhigs@163.com
 * @LastEditTime: 2023-11-22 22:33:35
 * @FilePath: /three-react/src/pages/Camera/Camera1.tsx
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 */
import { useEffect, useRef } from "react"
import createRender from '@/createRender';
import * as THREE from 'three'

const state = {}
export default function Page() {
  
  const container = useRef(null);
  useEffect(() => {
    if (!state.isMounted) {
      createRender(container)(render);
      state.isMounted = true;
    }
  }, [])

  function render(scene, camera, renderer) {
    const geometry = new THREE.SphereGeometry(5)
    const material = new THREE.MeshLambertMaterial({
      color: 0xffff00,
    })
    const mesh1 = new THREE.Mesh(geometry, material);
    const mesh2 = new THREE.Mesh(geometry, material);



  
    scene.add(mesh1)
    scene.add(mesh2)


    // 单位向量    单位向量是指向量的长度为1
    const v = new THREE.Vector3(1,0,0)
    console.log('单位向量', v.length())
    // 非单位向量  
    const dir = new THREE.Vector3(1,1,0)
    console.log('非单位向量', dir.length())


    // 向量归一化 是指将非单位向量等比例缩放xyz三个分量 缩放到向量长度为1
    // 手动实现
    const dir1 = dir.clone();
    const len = dir1.length();

    dir1.x = dir1.x/len;
    dir1.y = dir1.y/len;
    dir1.z = dir1.z/len;
    console.log('归一化后', dir1.length())

    // 接口实现
    const result = dir.clone().normalize();
    console.log('归一化后', result.length())


    const AB = new THREE.Vector3(100,50,0);
    console.log('AB', AB);


    // 物体沿着直线AB平移：单位向量表示平移方向
    // 已知直线AB上两个坐标，A点(-50,0,-50)、B点(100,0,100)。物体默认在A点，希望从A点开始沿着直线AB移动距离100。
    const start = new THREE.Vector3(-50,0,-50);
    const end = new THREE.Vector3(100,0,100);
    const S = end.clone().sub(start).normalize();
    console.log('S', S)

    const T = S.clone().multiplyScalar(100)
    console.log('T', T)
    mesh1.position.add(T)
    mesh2.translateOnAxis(S, 100)

  }

  return (
    <div id="container" className="full container" ref={container}></div>
  )
}